import { useEffect, useState } from "react";
import { isAuth } from "../../helpers/auth";
import Layout from "../core/Layout";
import axios from "axios"
import {API} from '../../config'
import {Divider, Select, Typography} from 'antd'
import dateformat from 'dateformat'
const {Title} = Typography
function Order () {
    const [orders, setOrders] = useState([])
    const {user, token} = isAuth()
    async function loadorders () {
        let {data} = await axios.get(`${API}/order/list/${user._id}`,{
            headers: {
                Authorization:`Bearer ${token}`
            }
        })
        setOrders(data)
    }
    useEffect(() => {
        loadorders()
    },[])
    const getOrderNumber = () => {
        return orders.length >0 ? `您的订单数量是${orders.length}`:"您还没有订单"
    }
    const showStatus = (status) => {
        switch (status) {
            case "UnPaid":
                return "未付款"
            case "Paid":
                return "已付款"
            case "Shipped":
                return "运输中"
            case "Completed":
                return "已完成"
            case "Cancelled":
                return "已取消"
        }
    }
    const handleOnChange = (orderId) => status => {
        axios.put(`${API}/order/status/${user._id}`,{orderId,status},{
            headers:{
                Authorization: `Bearer ${token}`
            }
        }).then(() => loadorders())
    }
    return (<Layout title="订单列表" subTitle={getOrderNumber()}>
        
        {
            orders.map(item => (
                <>
                    <Title level={5}>订单ID: {item._id}</Title>
                    <table style={{ width: "100%" }}> 
                        <thead className="ant-table-thead"> 
                            <tr>
                                <th className="ant-table-cell">订单状态</th> 
                                <th className="ant-table-cell">订单号</th> 
                                <th className="ant-table-cell">总价</th> 
                                <th className="ant-table-cell">创建时间</th> 
                                <th className="ant-table-cell">邮寄地址</th> 
                                <th className="ant-table-cell">客户姓名</th> 
                            </tr> 
                        </thead> 
                        <tbody className="ant-table-tbody"> 
                            <tr className="ant-table-row"> 
                                <td className="ant-table-cell">
                                    {showStatus(item.status)}
                                    <Select defaultValue={item.status} onChange={handleOnChange(item._id)}>
                                        <Select.Option value="Unpaid">未付款</Select.Option>
                                        <Select.Option value="Paid">已付款</Select.Option>
                                        <Select.Option value="Shipped">运输中</Select.Option>
                                        <Select.Option value="Completed">已完成</Select.Option>
                                        <Select.Option value="Cancelled">已取消</Select.Option>
                                    </Select>
                                </td> 
                                <td className="ant-table-cell">{item.trade_no}</td> 
                                <td className="ant-table-cell">{item.amount}</td> 
                                <td className="ant-table-cell">{dateformat(item.createdAt,'yyyy-mm-dd')}</td> 
                                <td className="ant-table-cell">{item.address}</td> 
                                <td className="ant-table-cell">{item.user.name}</td> 
                            </tr> 
                        </tbody> 
                    </table>
                    <table style={{ width: "100%" }}> 
                        <thead className="ant-table-thead"> 
                            <tr>
                                <th className="ant-table-cell">商品名称</th> 
                                <th className="ant-table-cell">商品价格</th> 
                                <th className="ant-table-cell">商品数量</th> 
                                <th className="ant-table-cell">商品ID</th> 
                            </tr> 
                        </thead> 
                        <tbody className="ant-table-tbody"> 
                        {
                            item.products.map(item => (
                                <tr className="ant-table-row"> 
                                <td className="ant-table-cell">{item.product.name}</td> 
                                <td className="ant-table-cell">{item.product.price}</td> 
                                <td className="ant-table-cell">{item.count}</td> 
                                <td className="ant-table-cell">{item.product._id}</td> 
                            </tr> 
                            ))
                        }
                            
                        </tbody> 
                    </table>
                    <Divider />
                </>
            ))
        }
        {JSON.stringify(orders)}
    </Layout>)
}
export default Order